<template>
    <div class="app-container">
        <van-nav-bar title="邀请复利"  left-arrow @click-left="handleBack" />
        <van-notice-bar color="#7d7d7d" background="transparent" left-icon="volume-o" :text="noticeText" delay="2" />
        <div class="invite-main app-box">
            <!-- 邀请链接 -->
            <div class="system" style="margin-top: 10px">
                <!-- 注册所有用户，开会员的 -->
                <div class="system-title">使用专属链接进行推广</div>

                <van-button style="margin-top: 20px" block type="primary" size="small" native-type="submit" @click="handleGet">获取邀请链接</van-button>
            </div>
            <!-- <invite-component></invite-component> -->

            <div class="system" style="margin-top: 20px">
                <!-- 注册所有用户，开会员的 -->
                <div class="system-title">邀请福利</div>
                <div class="system-desc">
                    <div>
                        <span class="desc-title">普通代理:</span>
                        <span>
                            只要您注册账号，您就自动成为普通代理，邀请一人注册，注册完成后进入免费交流群可获得一天信号体验或者5元红包奖励,您邀请的人如果成为会员，根据开的会员类型，会收到10%的提成，如果开的一卡通，提成29u，开的单独订阅，提成16.8u
                        </span>
                    </div>
                    <div class="mt10">
                        <span class="desc-title">会员代理:</span>
                        <span>
                            注册账号后并且成为会员，您邀请的人如果成为会员，根据开的会员类型，会收到15%的提成，如果开的一卡通，提成44u，开的单独订阅，提成25u,强烈推荐大家成为会员代理，基本上推广三个会员，您自己的会员费就能赚回来
                        </span>
                    </div>
                    <div class="mt10">
                        <span class="desc-title">顶级代理：</span>
                        <span>顶级代理条件，需要成为
                            <span
                                class="maincolor">年会员</span>您邀请的人如果成为会员，根据开的会员类型，会收到30%的提成，如果开的一卡通，提成88u，开的单独订阅，提成48u</span>
                    </div>
                </div>
            </div>

            <div class="system invite-step" style="margin-top: 20px">
                <!-- 注册所有用户，开会员的 -->
                <div class="system-title">代理流程</div>
                <p>
                    1.代理人需让被邀请人(下级)关注公众号(惊鸿量化研习社)=>点击预警工具=>注册账号(注册填写代理的邀请码)=>点击我的四位数数字=><span class="maincolor"
                        @click="$router.push('/setting/kefu')">发给客服</span>
                </p>
                <p>
                    2.被邀请人开通会员需要用我们指定收款链接转账或转U，下级付款后我们会把奖励陆续发放(代理奖励根据指定分成)
                </p>
                <p>
                    3.下级如有暂时不开通也可拉入交流群，后续开通依然算作代理人奖励。
                </p>
            </div>

            <!-- 谁谁邀请多人人注册，开通会员多少人，返现100U，广告 -->

            <!-- 排行榜 -->

            <!-- 我的佣金 -->

            <!-- 注册所有用户，开会员的 -->
            <!-- <div class="system" style="margin-top: 10px;">
                
                <div class="system-title">近期注册用户</div>  
                <div class="invite-list"></div>
            </div> -->
        </div>
    </div>
</template>

<script>
import { showToast, showSuccessToast } from 'vant';
import ClipboardJS from 'clipboard';
// import InviteComponent from '@/components/invite/index';
import { mapState } from 'pinia';
import { useUserStore } from '@/store/user';
// import { getInviteList } from '@/api/user';
// import { getWxAppInfo } from '@/api/home'
export default {
    name: 'invitesilent',
    props: {},
    data() {
        return {
            registerNum: 0,
            vipNum: 0,
            noticeText:
                '张**邀请注册会员100人，返现5800U\xa0\xa0\xa0\xa0\xa0\xa0 \xa0\xa0\xa0\xa0\xa0\xa0李**邀请注册会员94人，返现5400u\xa0\xa0\xa0\xa0\xa0\xa0 \xa0\xa0\xa0\xa0\xa0\xa0上官**邀请注册会员60人，返现3480u\xa0\xa0\xa0\xa0\xa0\xa0 \xa0\xa0\xa0\xa0\xa0\xa0王**邀请注册会员58人，返现3364u',
        };
    },
    components: {
        // InviteComponent,
    },
    created() {
        this.setCopy();
        this.init();
    },
    computed: {
        ...mapState(useUserStore, ['inviteCode']),
    },
    methods: {
        handleBack() {
            if (this.$route.query.type === 'inner') {
                this.$router.back();
            } else {
                this.$router.push('/login');
            }
        },
        handleGet() {
            this.$router.push('/login');
        },
        init() {
            // getInviteList().then((res) => {
            //     console.log(res);
            //     if (res.code === 20000) {
            //         this.registerNum = res.data.filter((item) => !item.vip).length;
            //         this.vipNum = res.data.filter((item) => item.vip).length;
            //     }
            // });
            // if (!this.wxOpenId) {
            //     getWxAppInfo().then(response => {
            //         if (response.success && response.data != null) {
            //             const data = response.data
            //             const appid = data.appId
            //             const host = location.href.split('#')[0] + 'wx/redirect/' + appid
            //             const url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + encodeURIComponent(host) + '&response_type=code&scope=snsapi_base&state=123#wechat_redirect'
            //             location.href = url
            //         }
            //     })
            // }
            
        },
        getInvite() {
            this.$router.push({
                path: '/register',
            });
        },
        setCopy() {
            let clipborad = new ClipboardJS('#copyUrl');
            //复制成功
            clipborad.on('success', function () {
                showSuccessToast('复制成功');
            });
            //复制失败
            clipborad.on('error', function () {
                showToast('复制失败');
            });
        },
        handleShare() {
            // function shareToWechat() {
            //     var title = '量化AG'; // 分享的标题
            //     var desc = '五大顶级策略，五大顶级算法竭力助你'; // 分享的摘要
            //     var link = 'https://www.aiaabiok.com/#/home'; // 分享的链接地址
            //     var imgUrl = 'https://www.aiaabiok.com/ag.png'; // 分享的图片地址（可选）
            //     wx.ready(function () {
            //         wx.onMenuShareTimeline({
            //             title: title,
            //             link: link,
            //             imgUrl: imgUrl,
            //             success: function () {
            //                 alert('已分享到朋友圈');
            //             },
            //             cancel: function () {
            //                 alert('取消分享');
            //             },
            //         });
            //         wx.onMenuShareAppMessage({
            //             title: title,
            //             desc: desc,
            //             link: link,
            //             imgUrl: imgUrl,
            //             type: '', // 分享类型，默认为link
            //             dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            //             success: function () {
            //                 alert('已分享给好友');
            //             },
            //             cancel: function () {
            //                 alert('取消分享');
            //             },
            //         });
            //     });
            // }
            // shareToWechat();
        },
    },
};
</script>
<style lang="less" scoped>
.invite-main {
    padding: 0 16px 16px;
}

.invited-line {
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 14px;

    .inviited-item {
        text-align: center;
    }

    .invited-num {
        font-size: 22px;
        color: var(--main-color);
        font-weight: 500;
        margin-bottom: 10px;
        text-align: center;
    }
}

.app-box {
}

.system-desc {
    font-size: 13px;
}

.desc-title {
    color: var(--main-color);
    margin-right: 4px;
    font-weight: 500;
    font-size: 20px;
}

.mt10 {
    margin-top: 10px;
}

.invite-step {
    font-size: 13px;
}
</style>
